<template>
	<view class="homepage">
		<view class="flex-col wrapper">
			<u-navbar class="navbar"
				height="60"
				:background="navBarColor"
			    back-icon-name="arrow-left"
			    back-text="厦门工学院"
				:border-bottom="false"
				:is-back="false"
				:immeive="true">
				<!-- <slot name="right">
					<text>12312</text>
				</slot> -->
				<view class="wrap">
					<u-icon name="map" color="#ffffff" size="40"></u-icon>
					<text class="text-color-iverse font-size-base map-wrap-text">厦门工学院</text>
				</view>
			</u-navbar>
			<u-swiper 
				class="swiper" 
				:list="list" 
				 mode="none" 
				:height="300" 
				>
			</u-swiper>
			<u-gap height="15" bg-color="#bbb"></u-gap>
			<u-notice-bar class="noticeBar" :list="list2"></u-notice-bar>
			<u-gap height="15" bg-color="#bbb"></u-gap>
			<view class="swiperGrid246">
				<u-grid  :col="3" :border="false" @click="gridClick">
					<u-grid-item v-for="(item, index) in gridItemList" :index="index" :key="index">
						<view  :class="'t-icon '+' '+  item.menuIcon"></view>
						 <text  class="pt-30">{{item.menuName}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			
			<u-gap height="15" bg-color="#bbb"></u-gap>
			<view class="tab-wrapper">
				<view style="height: 20rpx;"></view>
					<u-tabs class="tabs"
						bar-height="6"
						bar-width="40"
						active-color="#2979ff"
						:is-scroll="false" 
						:list="tabList" 
						:current="currentTabIndex"  
						@change="tabsChange">
					</u-tabs>
				<view v-if="currentTabIndex == 0">
					<taskCard v-for="(item,index) in taskList" :dataList="item" :key="index">
						<slot>
							<u-gap height="15" bg-color="#f8f8f8"></u-gap>
						</slot>
						
					</taskCard>
					<!-- <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" /> -->
				</view>
				
				<view v-if="currentTabIndex == 1">
					<socialCard v-for="i in 5"></socialCard>
					<!-- <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" /> -->
				</view>
			</view>
			#ifdef H5
				<u-gap height="190" bg-color="#bbb"></u-gap>
			<!-- #endif -->
				<u-gap height="20" bg-color="#bbb"></u-gap>
		</view>
	</view>
</template>
<script>
	// import {dataList} from "@/api/dataList.js"
	export default {
		data() {
			return {
				taskList:'',
				status:'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				currentTabIndex: 0,
				navBarColor:{
					background:"linear-gradient(to left, #1e88e5, #448aff, #448aff)"
				},
				// gridItemList: ["integral", "kefu-ermai", "coupon", "gift", "scan", "pause-circle", "wifi", "email"],
				gridItemList:[
					{menuName:'快递代取',menuMethod:'Express',menuIcon:'kuaidi'},
					{menuName:'外卖/代拿',menuMethod:'TakeOut',menuIcon:'waimai'},
					{menuName:'代替服务',menuMethod:'Replace',menuIcon:'linjintiaochuquerensvg'},
					{menuName:'租借服务',menuMethod:'Lease',menuIcon:'wupinzujie'},
					{menuName:'失物招领',menuMethod:'LostAndFound',menuIcon:'shiwuzhaoling'},
					{menuName:'捞人',menuMethod:'LookSomeOne',menuIcon:'aixintongdao'}
				],
				
				list: [{
					image: "/static/images/swiper/swiper-item-01.png",
					title: "万物皆可带"
				},
				{
					image: "/static/images/swiper/swiper-item-02.png",
					title: "有问必答"
				}],
				list2: ["新版本上线"],
				tabList: [{
					name: "任务"
				}, {
					name: "动态"
				}]
			}
		},
		methods: {
			gridClick(index) {
				console.log(this.taskList)
				this.$u.toast(`grid点击事件, 第${index + 1}宫格`);
			},
			tabsChange(index) {
				this.currentTabIndex = index;
			},
			
		},
		created() {
		},
		async onLoad(){
			this.taskList = await this.$api('dataList') 
		}
	}
</script>
<style lang="scss" scoped>
	@import "/css/home.scss"
	
</style>
